<template>
  <div class="hiprint-page">
    <div id="print-cont" class="print-cont"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
import { useRoute } from "vue-router";
import $ from "jquery";
import "@/components/hiprint/utils/hiprint.config";
import { hiprint } from "@/components/hiprint";
import { getTemplateData } from "@/api/createHiprintHtml";

const route = useRoute();
/**
 * 初始化模板渲染页面
 */
const initPrint = () => {
  const hiprintTemplateId = route.query.id;
  getTemplateData({ id: hiprintTemplateId }).then((res: any) => {
    const data = res.data;
    const templateJson = JSON.parse(data.templateJson);
    const printData = {
      ...data.printData.otherInfo,
      ...data.printData.tableInfo,
    };
    const hiprintTemplate = new hiprint.PrintTemplate({
      template: templateJson,
    });
    nextTick(() => {
      $("#print-cont").html(hiprintTemplate.getHtml(printData));
    });
  });
};
initPrint();
</script>

<style scoped>
</style>